<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
	<title>Binary Tree Structure</title>
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<script src="https://unpkg.com/http-vue-loader"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<body style="white-space: nowrap;overflow-x: scroll;">
	<div id="app" >
		<div  class="page_container" style="	padding: 15px;margin-top: 30px;" >
			<i class="el-icon-edit" ></i>
			<el-tag
					:key="tag"
					v-for="tag in dynamicTags"
					closable
					:disable-transitions="false"
					@close="handleClose(tag)">
				{{tag}}
			</el-tag>
			<el-input
					class="input-new-tag"
					v-if="inputVisible"
					v-model="inputValue"
					ref="saveTagInput"
					size="small"
					@keyup.enter.native="handleInputConfirm"
					@blur="handleInputConfirm"
			>
			</el-input>
			<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
			<el-tooltip placement="top">
				<div slot="content">此处为数据输入区，可以进行数据的删除，点击"+ New Tag"可以新建节点</div>
				<i class="el-icon-warning-outline" style="float: right ; font-size: 30px; margin-top: 2px" ></i>
			</el-tooltip>


		</div>

		<div  class="page_container"  style="padding-top: 20px;width: 30%;float:left;padding: 20px;margin-top: 15px;">
			<el-tooltip placement="top">
				<div slot="content">方式一：通过节点Index来验证。如，8;方式二：通过节点数值来验证。如，标签1;
					<br/>验证存在：选中为验证存在，不选为验证不存在，默认为验证存在</div>
				<i class="el-icon-warning-outline" style="float: left ; font-size: 20px;" ></i>
			</el-tooltip>
			<div style="margin-bottom: 20px"></div>

			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="验证节点" >
					<el-input v-model="form.index" :disabled="status"></el-input>
				</el-form-item>
				<el-form-item label="验证数据">
					<el-input v-model="form.data" :disabled="!status"></el-input>
				</el-form-item>
				<el-form-item label="验证方式">
					<el-radio-group v-model="form.choice" @change="agreeChange" :disabled="!canChoice">
						<el-radio label="方式1"></el-radio>
						<el-radio label="方式2"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="验证存在">
					<el-switch v-model="form.isExist" @change="changeExit"></el-switch>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" >立即验证</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="page_container" style="width: 65%;float:right;height: 365px;padding-top: 20px;margin-top: 15px;padding-left: 10px">
			<el-table
					:data="tableData"
					stripe
					height="320"
					style="width: 100%">
				<el-table-column
						prop="index"
						label="索引"
						width="180">
				</el-table-column>
				<el-table-column
						prop="hash"
						label="数据">
				</el-table-column>
				<el-table-column
						prop="chash"
						label="哈希结果（当前数据与上一个哈希结果合并求哈希）"
						>
				</el-table-column>
			</el-table>
		</div>

		<div style="margin-top: 500px">
			<my-component :list="treeMenusData" ></my-component>
		</div>

	</div>
</body>
<style>
	@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");
	.el-tag + .el-tag {
		margin-left: 10px;
	}
	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}
	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}
	.page_container{
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		margin-left: 10px;
		margin-right: 20px;
		margin-bottom: 20px;
		border-radius: 30px

	}

</style>

<script>
	Vue.use(httpVueLoader);
	// 该vue对象，绑定了页面中id是app的那个div
	new Vue(
		{
			el: '#app', //element
			// 数据哪里来？
			data: {
				tableData: [],
				canChoice:true,
				status:false,
				form:{
					index:'',
					data:'',
					choice:'方式1',
					isExist:true,
				},
				treeMenusData: [],
				dynamicTags: ['标签1', '标签3', '标签4', '标签5'],
				inputVisible: false,
				inputValue: ''
			},
			components: {
				// 将组建加入组建库
				'my-component': 'url:my-component.vue'
			},
			created:function (){
				this.submit()

			},
			methods: {
				changeExit:function (){
					let that = this
					if(that.form.isExist){
						that.canChoice=true
						if(that.form.choice==="方式1"){
							that.status=false
						}else {
							that.status=true
						}
					}else {
						that.canChoice=false
						that.form.choice="方式2"
						that.status = true;
					}
				},

				agreeChange:function(val){
					let that = this
					if(val=="方式1"){
						that.status = false;
					}else{
						that.status = true;
					}
				},

				//验证
				onSubmit() {
					const t = this
					let result = this.dynamicTags.indexOf(this.form.data);
					if(this.form.isExist===false ){
						if(!(this.form.data>this.dynamicTags[0] && this.form.data < this.dynamicTags[this.dynamicTags.length-1])){
							alert("输入数据超出现有数据范围")
							return;
						}
					}

					if(result>-1 || this.form.choice==="方式1" || this.form.isExist===false){
						axios.post('prove', {
							index: this.form.index,
							data: this.form.data,
							choice:this.form.choice,
							isExist:this.form.isExist,

						})
								.then(function (response) {
									console.log(response);
									if(response.data)
										t.treeMenusData = response.data

									axios.post('detailed').then(function (response) {
										t.tableData = response.data
									})


								})
								.catch(function (error) {
									console.log(error);
								});
					}else {
						alert("非法输入！")
					}
				},

				submit() {
					const t = this
					t.dynamicTags.sort()
					axios.post('/data', {
						list: this.dynamicTags,
					})
							.then(function (response) {
								console.log(response);
								t.treeMenusData = response.data
							})
							.catch(function (error) {
								console.log(error);
							});
				},

				handleClose(tag) {
					const t = this
					this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
					this.dynamicTags.sort()
					axios.post('/data', {
						list: this.dynamicTags,
					})
							.then(function (response) {
								console.log(response);
								t.treeMenusData = response.data
							})
							.catch(function (error) {
								console.log(error);
							});

				},

				showInput() {
					this.inputVisible = true;
					this.$nextTick(_ => {
						this.$refs.saveTagInput.$refs.input.focus();
					});
				},

				handleInputConfirm() {
					const t = this
					let inputValue = this.inputValue;
					if (inputValue) {
						this.dynamicTags.push(inputValue);
					}
					this.dynamicTags.sort()
					this.inputVisible = false;
					this.inputValue = '';
					axios.post('/data', {
						list: this.dynamicTags,
					})
							.then(function (response) {
								console.log(response);
								t.treeMenusData = response.data
							})
							.catch(function (error) {
								console.log(error);
							});

				}
			}
		}
	);

</script>

</html>